<template>
    <div class="search-box">
        <div class="ipt-box">
            <img src="../assets/images/logistics/sousuo.png" />
            <input type="text" :placeholder="placeHolder" />
        </div>
        <a href="javascript:;">搜索</a>
    </div>
</template>

<script>
export default {
    props: ['placeHolder'],
    data() {
        return {};
    },
};
</script>

<style lang="less" scoped>
.search-box {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.21rem 0.3rem;
    box-sizing: border-box;
    .ipt-box {
        height: 0.6rem;
        width: 6.05rem;
        background-color: #f6f6f6;
        border-radius: 0.6rem;
        display: flex;
        align-items: center;
        padding: 0 0.23rem;
        box-sizing: border-box;
        img {
            width: 0.26rem;
            height: 0.28rem;
            margin-right: 0.23rem;
        }
        input {
            flex: 1;
            height: 100%;
            box-sizing: border-box;
            background: none;
            border: none;
        }
        ::-webkit-input-placeholder {
            color: #aaaaaa;
        }
    }
    a {
        color: #003399;
    }
}
</style>
